<template>
  <view>
    <!-- 筛选条件 -->
    <view class="filter-container">
      <view class="total">商品{{ total }}件</view>
      <view class="order">
        <view
          class="order-item"
          :class="{ active: orderType === 'all' }"
          @click="handleOrder('all')"
        >
          <view class="order-item-title">综合</view>
        </view>
        <view
          class="order-item"
          :class="{ active: orderType === 'buy_number' }"
          @click="handleOrder('buy_number')"
        >
          <view class="order-item-title">销量</view>
        </view>
        <view
          class="order-item"
          :class="{ active: orderType === 'is_new' }"
          @click="handleOrder('is_new')"
        >
          <view class="order-item-title">上新</view>
        </view>
        <view
          class="order-item"
          :class="{ active: is_price !== '' }"
          @click="handleOrderPrice"
        >
          <view class="order-item-title">价格</view>
          <view class="order-item-arrow">
            <image
              class="up"
              :src="
                is_price === -1
                  ? '/static/images/ud-s.png'
                  : '/static/images/ud.png'
              "
              mode="widthFix"
            ></image>
            <image
              class="down"
              :src="
                is_price === 1
                  ? '/static/images/ud-s.png'
                  : '/static/images/ud.png'
              "
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view
          v-if="hideFilter"
          class="order-item"
          style="margin-left: 36rpx"
          :class="{ active: hasFilter }"
          @click="handleOrderFilter"
        >
          <view class="order-item-title">筛选</view>
          <image
            v-if="!hasFilter"
            style="width: 20rpx; height: 20rpx; margin-left: 4rpx"
            src="/static/images/filter.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            style="width: 20rpx; height: 20rpx; margin-left: 4rpx"
            src="/static/images/filter-s.png"
            mode="widthFix"
          ></image>
        </view>
        <view
          v-else
          class="order-item"
          style="margin-left: 36rpx; width: 3em"
        ></view>
      </view>
      <!-- 筛选面板 -->
      <uni-popup ref="popup" style="height: 100%">
        <filter-panel
          ref="filterPanel"
          class="filter-panel"
          style="width: 100%"
          :filterData="filterData"
          :top="price_top"
          :bottom="price_bottom"
          :product_type_one_id="product_type_one_id"
          :category_id="category_id"
          @closePanel="handleClosePanel"
          @applyFilter="handleApplyFilter"
          @getAllBrand="getAllBrand"
          @currentBrand="getCurrentBrand"
        ></filter-panel>
      </uni-popup>

      <!-- 筛选面板 -->
      <uni-popup ref="allBrandPopup">
        <view class="all-brand-list-box">
          <!--view class="brand-title">面料品牌</view-->
          <view class="brand-desc">已选品牌</view>
          <view class="brand-list">
            <view
              class="brand-list-item"
              v-for="(item, index) in selectedList"
              :key="index"
            >
              {{ item.search_name }}
              <image
                src="/static/images/close-yellow.png"
                mode="widthFix"
                class="brand-list-item-close"
                @click="handleDeleteBrand(item)"
              ></image>
            </view>
          </view>
          <view class="brand-tag">
            <view
              class="brand-tag-item"
              v-for="(item, index) in allBrandList"
              :key="index"
              :class="{ 'brand-tag-item-active': item.letter === currentIndex }"
              @click="handleBrandTag(item.letter)"
            >
              {{ item.letter }}
            </view>
          </view>
          <scroll-view
            class="all-brand-list"
            scroll-y
            :scroll-into-view="currentIndex"
          >
            <view
              class="all-brand-list-item"
              v-for="(item, index) in allBrandList"
              :key="index"
            >
              <view class="letter" :id="item.letter">{{ item.letter }}</view>
              <view
                class="option"
                v-for="(r, i) in item.list"
                :key="i"
                @click="handleSelectBrand(index, i)"
              >
                <view class="round" :class="{ active: r.select }"></view>
                <view>{{ r.search_name }}</view>
              </view>
            </view>
          </scroll-view>

          <!-- 底部按钮 -->
          <view class="footer" style="z-index: 102">
            <button class="secondary-button" @click="handleCloseAllBrand">
              取消
            </button>
            <button class="primary-button" @click="handleApplyAllBrand">
              确定
            </button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import FilterPanel from './filterPanel.vue'
export default {
  name: 'filterCom',
  components: {
    FilterPanel,
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    product_type_one_id: {
      type: String,
      default: '',
    },
    category_id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      orderType: 'all',
      is_price: '', // 是否价格排序 1 升序 -1 降序
      price_top: '', // 价格上限
      price_bottom: '', // 价格下限
      // 筛选面板是否显示
      showFilterPanel: true,
      filterData: [], // 筛选数据

      currentBrandList: [], // 当前品牌列表 ['','','']
      allBrandList: [], // 全部品牌列表
      currentIndex: 'A', // 当前索引
    }
  },
  computed: {
    // 计算属性可以根据需要添加
    hasFilter() {
      return (
        this.filterData.length > 0 ||
        this.price_top ||
        this.price_bottom ||
        this.product_type_one_id
      )
    },
    // 已选品牌列表
    selectedList() {
      const arr = []
      this.allBrandList.map((item) => {
        item.list.map((r) => {
          if (r.select) {
            arr.push(r)
          }
        })
      })
      return arr
    },
    // 是否隐藏筛选
    hideFilter() {
      let category = (this.category_id && this.category_id.split(',')) || []
      let flag = category.length === 1 || !this.product_type_one_id
      return flag
    },
  },
  methods: {
    handleOrder(type) {
      this.orderType = type
      this.is_price = '' // 重置价格排序状态
      this.$emit('type', type)
    },
    handleOrderPrice() {
      // 切换价格排序状态
      if (this.is_price === '' || this.is_price === -1) {
        this.is_price = 1
      } else if (this.is_price === 1) {
        this.is_price = -1
      }
      this.orderType = ''
      this.$emit('price', this.is_price)
    },
    // 打开筛选面板
    handleOrderFilter() {
      // 打开筛选面板
      this.$refs.popup.open('right')
      this.$emit('openStatus', true)
    },
    handleClosePanel() {
      this.$emit('openStatus', false)
      this.$refs.popup.close()
    },
    handleApplyFilter(filterData) {
      this.filterData = filterData.selectedFilters || []
      this.price_top = filterData.price_top || ''
      this.price_bottom = filterData.price_bottom || ''
      // 关闭筛选面板
      this.$refs.popup.close()
      this.$emit('filter', {
        selectedFilters: filterData.selectedFilters,
        price_top: filterData.price_top,
        price_bottom: filterData.price_bottom,
        product_type_one_id: filterData.product_type_one_id || '',
      })
    },
    async getAllBrand() {
      await this.$api
        .getAllBrand({
          category_id: this.category_id,
          product_type_one_id: this.product_type_one_id,
        })
        .then((res) => {
          this.allBrandList =
            res.data.map((r) => {
              if (r.brand && r.brand.length > 0) {
                r.list = r.brand.map((item) => {
                  return {
                    search_val: item,
                    search_name: item,
                    product_type_keywords: 'brand_name',
                    select: this.currentBrandList.includes(item),
                  }
                })
              }
              return r
            }) || []
        })
      this.$refs.allBrandPopup.open('right')
    },
    // 关闭已选择的品牌
    handleCloseAllBrand() {
      this.$refs.allBrandPopup.close()
    },
    // 应用已选择的品牌
    handleApplyAllBrand() {
      // 记录缓存
      uni.setStorageSync('selectedBrand', this.selectedList)
      this.$refs.allBrandPopup.close()
      this.$refs.filterPanel.initData()
    },
    // 获取当前品牌列表
    getCurrentBrand(list) {
      this.currentBrandList = list
    },
    // 选择品牌
    handleSelectBrand(index, i) {
      // 如果选择的数量小于4，则可以继续选择
      if (this.selectedList.length < 4) {
        this.allBrandList[index].list[i].select =
          !this.allBrandList[index].list[i].select
      }
    },
    // 点击品牌标签
    handleBrandTag(letter) {
      this.currentIndex = letter
    },
    // 删除已选择的品牌
    handleDeleteBrand(item) {
      this.allBrandList.map((it) => {
        it.list.map((r) => {
          if (r.search_val === item.search_val) {
            r.select = false
          }
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './filterCom.scss';
</style>
